<template>
  <div>
    <h1>库存一览</h1>
    <br>
    <span>查询商品</span>
    <el-input type="text" v-model="SQEName" placeholder="商品名称" style="width: 10%"></el-input>
    <el-input type="text" v-model="startNumber" placeholder="起始数量" style="width: 10%"></el-input>
    <el-input type="text" v-model="endNumber" placeholder="结束数量" style="width: 10%"></el-input>
    <!--下拉列表-->
    <!--placeholder 提示信息-->
    <span>未定销售价</span>
    <el-select v-model="edu">
      <!--label 指的是显示的值-->
      <!--value 代表的是需要提交给服务器的值-->
      <el-option label="不限" value="0"></el-option>
      <el-option label="未定销售价" value="1"></el-option>
    </el-select>
    <!--下拉列表-->
    <!--placeholder 提示信息-->
    <span>类别</span>
    <el-select v-model="edus">
      <!--label 指的是显示的值-->
      <!--value 代表的是需要提交给服务器的值-->
      <el-option value="电脑产品"></el-option>
      <el-option value="安防产品"></el-option>
      <el-option value="打印扫描设备"></el-option>
      <el-option value="办公用品"></el-option>
    </el-select>
    <el-button type="primary" @click="search()">搜索</el-button>
    <br><br>
    <span>采购物品</span>
    <el-row>
      <el-table :data="goodsList" stripe>
        <el-table-column prop="commodityName" label="商品名称"></el-table-column>
        <el-table-column prop="brand" label="品牌"></el-table-column>
        <el-table-column prop="category" label="类别"></el-table-column>
        <el-table-column prop="repertoryAmount" label="库存数量"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="query(scope.row)">查看信息</el-button>
            <el-button type="primary" @click="updateBy(scope.row)">修改信息</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-row>
    <br>

    <el-dialog v-model="pick" title="添加" style="width: 1000px">
      <el-form :model="form" ref="form">
        <el-form-item label="照片" style="margin-left: 500px">
          <el-image :src="'/api/face/'+form.img" style="width: 200px;height: 200px"></el-image>
        </el-form-item>
        <el-form-item label="商品编号" style="margin-top: -200px">
          {{ form.commoditySerialNumber }}
        </el-form-item>
        <el-form-item label="商品名称">
          {{ form.commodityName }}
        </el-form-item>
        <el-form-item label="品牌">
          {{ form.brand }}
        </el-form-item>
        <el-form-item label="类别">
          {{ form.category }}
        </el-form-item>
        <el-form-item label="最新采购价">
          {{ form.purchasePrice }}
        </el-form-item>
        <el-form-item label="库存数量">
          {{ form.repertoryAmount }}
        </el-form-item>
        <el-form-item label="建议销售价">
          {{ form.salePrice }}
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="determine()">确定</el-button>

    </el-dialog>


    <el-dialog v-model="picks" title="添加" style="width: 1000px">
      <el-form :model="form" ref="form">
        <el-form-item label="照片" style="margin-left: 500px">
          <el-image :src="'/api/face/'+form.img" style="width: 200px;height: 200px"></el-image>
        </el-form-item>
        <el-form-item label="商品编号" style="margin-top: -200px">
          {{ form.commoditySerialNumber }}
        </el-form-item>
        <el-form-item label="商品名称">
          {{ form.commodityName }}
        </el-form-item>
        <el-form-item label="品牌">
          {{ form.brand }}
        </el-form-item>
        <el-form-item label="类别">
          {{ form.category }}
        </el-form-item>
        <el-form-item label="最新采购价">
          {{ form.purchasePrice }}
        </el-form-item>
        <el-form-item label="库存数量">
          {{ form.repertoryAmount }}
        </el-form-item>
        <el-form-item label="建议销售价">

          <el-input v-model="form.salePrice" style="width: 100px"></el-input>
        </el-form-item>



      </el-form>
      <el-button type="primary" @click="determineBY()">确定</el-button>


    </el-dialog>

    <el-button type="primary" @click="download()">下载库存</el-button>

  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "Stock",

  created() {
    this.search()
  },


  data() {
    return {
      goodsList: [],
      supplier: {},
      SQEName: '',
      startNumber: '',
      endNumber: '',
      edu: '0',
      edus: '',
      pick: false,
      picks: false,
      form: {
        commoditySerialNumber: '',
        commodityName: '',
        brand: '',
        category: '',
        purchasePrice: '',
        repertoryAmount: '',
        salePrice: '',
        img: '',
      }

    }

  }, methods: {
    search() {
      let param = new URLSearchParams();
      param.append("SQEName", this.SQEName)
      param.append("startNumber", this.startNumber)
      param.append("endNumber", this.endNumber)
      param.append("edu", this.edu)
      param.append("edus", this.edus)


      axios.post("/api/CommodityRepertory/queryBy", param).then(res => {
        this.goodsList = res.data
      })
    },
    query(scope) {
      this.pick = true
      this.form = scope
    },
    determine() {
      this.pick = false
    },
    updateBy(scope) {
      this.form = scope
      this.picks = true

    },
    determineBY(){
      axios.post("/api/CommodityRepertory/updateGoodsBean",this.form).then(res=>{
        this.picks = false
        ElMessage({
          message: '修改成功',
          type: 'success'
        })
        this.search()
      })
    },
    download(){

      window.open("/api/CommodityRepertory/getexcel")
    }
  }
}
</script>

<style scoped>

</style>